<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="./js/jQuery3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<div class="container">
			<!-- nav是一个html5的新标签 -->
			<!-- 固定（导航条跟随滑动） -->
			<nav class="navbar bg-dark navbar-dark navbar-expand-md fixed-top">
				<a href="#" class="navbar-brand">Jd.com</a>
				<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#coll">
					<span class="navbar-toggler-icon"></span>
				</button>
				<!-- 导航菜单的制作 -->
				<div class="collapse navbar-collapse" id="coll">
					<ul class="navbar-nav">
						<li class="nav-item"><a href="#" class="nav-link">首页</a></li>
						<li class="nav-item"><a href="#" class="nav-link">新闻</a></li>
						<li class="nav-item">
							<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">教育</a>
							<div class="dropdown-menu bg-white">
								<a href="#" class="dropdown-item">菜单</a>
								<a href="#" class="dropdown-item">菜单</a>
								<a href="#" class="dropdown-item">菜单</a>
								<a href="#" class="dropdown-item">菜单</a>
							</div>
						</li>
						<li class="nav-item"><a href="#" class="nav-link">旅游</a></li>
						<li class="nav-item"><a href="#" class="nav-link">科技</a></li>
					</ul>
				</div>
				<form action="search.php" method="post" class="form-inline">
					<input type="search" name="key" id="key" class="form-control" placeholder="search" />
					<input type="submit" class="btn btn-outline-success ml-2" value="搜索"/>
				</form>
				<!-- 对文本字符串的垂直对齐。水平间距进行优化处理 -->
				<span class="navbar-text">普通文本</span>
			</nav>
			<div>
				<!-- img是行内元素 -->
				<img src="img/Example-ch3/Example-ch3/img/buliding.jpg" class="mx-auto d-block" title="钟楼">
			</div>
			<!-- <a href="#coll" class="btn btn-danger">hello</a> -->
		</div>
	</body>
</html>
